/* ============================================ SMART OASIS 2.0 — RTL / Arabic Overrides Applied when is set ============================================ */ :root[dir="rtl"], .rtl { --font-body: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif; --font-display: 'Cairo', 'Tajawal', 'Outfit', sans-serif; } /* Load Arabic web fonts */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap'); /* ── Global RTL direction ── */ .rtl * { font-family: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif; letter-spacing: 0 !important; /* Arabic doesn't use letter-spacing */ } .rtl body { text-align: right; } /* ── Navbar ── */ .rtl .nav-container { flex-direction: row-reverse; } .rtl .nav-links { flex-direction: row-reverse; } .rtl .nav-cta svg { transform: scaleX(-1); } /* ── Hero ── */ .rtl .hero-content { flex-direction: row-reverse; } .rtl .hero-stats { flex-direction: row-reverse; } .rtl .hero-actions { flex-direction: row-reverse; } .rtl .hero-actions .btn svg { transform: scaleX(-1); } /* ── Problem section ── */ .rtl .problem-grid { flex-direction: row-reverse; } .rtl .problem-stats { flex-direction: row-reverse; flex-wrap: wrap; } /* ── Section labels ── */ .rtl .section-label::before { margin-left: var(--space-sm); margin-right: 0; } /* ── Tech cards ── */ .rtl .tech-card-specs { flex-direction: row-reverse; } /* ── Fusion diagram ── */ .rtl .fusion-diagram { flex-direction: row-reverse; } .rtl .fusion-stream { transform: scaleX(-1); } .rtl .fusion-source { flex-direction: row-reverse; } /* ── Steps ── */ .rtl .steps-timeline { flex-direction: row-reverse; } .rtl .step { flex-direction: row-reverse; } .rtl .timeline-line { left: auto; right: 30px; } .rtl .step-number { margin-right: 0; margin-left: var(--space-lg); } /* ── Preview features list ── */ .rtl .preview-layout { flex-direction: row-reverse; } /* In RTL, dir=rtl on makes flex-row flow R-to-L naturally. So icon (first in DOM) lands on the RIGHT, text to its left. CORRECT. Do NOT add row-reverse here — it would double-flip back to LTR. */ .rtl .preview-features li { flex-direction: row; justify-content: flex-end; } .rtl .preview-features li svg { margin-left: 0; margin-right: var(--space-sm); flex-shrink: 0; } /* ── About grid ── */ .rtl .about-grid { flex-direction: row-reverse; } .rtl .credentials { flex-direction: row-reverse; } .rtl .credential svg { margin-left: var(--space-sm); margin-right: 0; } /* ── CTA grid ── */ .rtl .cta-grid { flex-direction: row-reverse; } /* ── Form ── */ .rtl .form-group label { text-align: right; } .rtl .form-group input, .rtl .form-group textarea { text-align: right; direction: rtl; } /* ── Footer ── */ .rtl .footer-content { flex-direction: row-reverse; align-items: flex-end; } .rtl .footer-links { flex-direction: row-reverse; } .rtl .footer-bottom { flex-direction: row-reverse; } .rtl .footer-brand { flex-direction: row-reverse; } /* ── Buttons ── */ .rtl .btn svg { transform: scaleX(-1); } /* ── Dashboard RTL ── */ .rtl .sidebar { left: auto; right: 0; border-left: 1px solid rgba(255, 255, 255, 0.05); border-right: none; } .rtl .topbar { left: 0; right: var(--sidebar-width); } .rtl .main-content { margin-left: 0; margin-right: var(--sidebar-width); } .rtl .sidebar-brand { flex-direction: row-reverse; } .rtl .sidebar-item { flex-direction: row-reverse; } .rtl .sidebar-badge { margin-left: 0; margin-right: auto; } .rtl .topbar-left { flex-direction: row-reverse; } .rtl .topbar-right { flex-direction: row-reverse; } .rtl .sidebar-back { flex-direction: row-reverse; } .rtl .sidebar-back svg { transform: scaleX(-1); } .rtl .chart-header { flex-direction: row-reverse; } .rtl .stat-card-header { flex-direction: row-reverse; } .rtl .pipeline-visual { flex-direction: row-reverse; } .rtl .pipe-arrow { transform: scaleX(-1); } .rtl .anomaly-item { flex-direction: row-reverse; } .rtl .popup-row { flex-direction: row-reverse; } .rtl .alert-feed-item { flex-direction: row-reverse; } .rtl .alert-feed-item { border-left: none; border-right: 3px solid transparent; } .rtl .alert-feed-item.critical { border-color: var(--status-infested); } .rtl .alert-feed-item.warning { border-color: var(--status-watch); } .rtl .alert-feed-item.info { border-color: var(--status-info); } .rtl .class-bar { flex-direction: row-reverse; } .rtl .class-value { text-align: left; } .rtl .data-table thead th, .rtl .data-table tbody td { text-align: right; } .rtl .map-controls { flex-direction: row-reverse; } .rtl .quick-stat { flex-direction: row-reverse; } .rtl .stat-break-item { flex-direction: row-reverse; } .rtl .stat-break-item strong { margin-left: 0; margin-right: auto; } /* ── Collapsible sidebar RTL ── */ @media (max-width: 1024px) { .rtl .sidebar { transform: translateX(100%); right: 0; left: auto; } .rtl .sidebar.open { transform: translateX(0); } .rtl .topbar { left: 0; right: 0; } .rtl .main-content { margin-right: 0; margin-left: 0; } } /* ── Comparison labels: reverse back so Healthy stays under healthy tree ── */ .rtl .comparison-labels { flex-direction: row-reverse; } /* ── Mobile hero RTL ── */ @media (max-width: 768px) { .rtl .hero-content { flex-direction: column; } .rtl .hero-stats { flex-direction: column; } .rtl .steps-timeline { flex-direction: column; } .rtl .step { flex-direction: column; } .rtl .step-number { margin-left: 0; } }